<template>
    <div style="height: 100%">
      <div class="sidebar-headPortrait" @click="openUserInfo()">
        <el-avatar class="avatarImg" shape="square" :size="getProportionHeight(0.05)" :src="headPortrait">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
        </el-avatar>
      </div>
      <div class="sidebar-icon" style="color: #07C160;">
        <div class="avatarImg">
          <i class="el-icon-chat-round" :style="{'font-size': getProportionHeight(0.03) + 'px'}"></i>
        </div>
      </div>
      <div class="sidebar-icon" style="color: #646464;">
        <div class="avatarImg">
          <i class="el-icon-user" :style="{'font-size': getProportionHeight(0.03) + 'px'}"></i>
        </div>
      </div>
      <user-info ref="userInfo" :parentGetUserInfo="parentGetUserInfo"></user-info>
    </div>
</template>

<script>
  import userInfo from "./userInfo";
  export default {
    name: "sidebar",
    components: {
      userInfo
    },
    props: {
      getUserInfo: {
        type: Function,
        default: null
      }
    },
    data () {
      return {
        headPortrait: '',
      }
    },
    methods: {
      changeHeadPortrait(avatarUrl) {
        this.headPortrait = this.config.baseConfig.photoBaseUrl + avatarUrl;
      },
      openUserInfo() {
        this.$refs.userInfo.changeDialogVisible();
      },
      parentGetUserInfo() {
        this.getUserInfo();
      }
    }
  }
</script>

<style scoped>
  .avatarImg{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .sidebar-headPortrait{
    height: 10%;
    position: relative;
  }
  .sidebar-icon{
    height: 8%;
    position: relative;
  }
  .sidebar-icon-active{
    color: #07C160;
  }
</style>
